<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>MVVM简单入门</title>
<!--    首先导入vue的驱动包-->
    <script src="../../框架/vue.js"></script>
</head>
<body>
<!--将来的Vue实例将会操作这个元素中的内容-->
<!--Vue实例所控制的这个元素区域，就是MVVM中的V-->
<div id="div1">
    <p>{{ msg }}</p>
</div>

<script>
<!--第二步是创建一个vue的实例-->
//当导入包之后，就会在浏览器的内存中多出了以恶搞vue的构造函数
//new 出来的这个vue对象就是MVVM中的VM调度者
let vm = new Vue({
    el:'#div1',//表示当前new出来的这个Vue实例，要控制页面上的哪个区域
    //这里的data就是MVVM中的M，专门用来保存每个页面单独的数据的
    data:{
        msg:'这是一个简单的vue框架实例'//通过Vue的指令，程序员可以方便的将数据渲染到页面上，程序员不再手动操作DOM元素了
    //    前端的Vue之类的框架，不建议手动操作DOM元素
    }
})
</script>
</body>
</html>